<template>
<view>
	<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="group-box">
			<view class="row" v-for="(item,index) in 10" @click="hotDetail">
				<view class="left">
					<view class="title">[活跃度] 11月3日商品期货活跃度</view>
					<view class="title">排行榜: 原油、燃油、沪锡位列前三</view>
					<view class="date">
						<text>2023-11-3 11:25:25</text>
						<text class="yellow-bg">沪锡</text>
						<text class="blue-bg">原油</text>
					</view>
				</view>
				<image class="cover" src="@/static/home/headBG.png"></image>
			</view>
		</view>
	</mescroll-body>
</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: []
			};
		},
		onLoad(e) {
			
		},
		methods:{
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$request({
					url: this.$api.getHotInfo,
					data: {
						pageSize: page.size,
						pageNum: page.num,
					},
					method: 'get',
					successCb: (res) => {
						uni.hideLoading();
						console.log('请求成功', res)
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.rows); //追加新数据
						this.mescroll.endSuccess(res.rows.length); // 隐藏加载状态栏
					},
					failCb(e) {
						// uni.hideLoading(); 
						this.mescroll.endErr();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
				// setTimeout(()=>{
				// 	this.mescroll.endSuccess(9,false);// 加载成功
				// },1500)
			},
			hotDetail(){
				uni.navigateTo({
					url: '/pages/homeSubpage/hotDetail/hotDetail'
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
}	
.group-box{
	padding:24rpx;
	.row{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:24rpx 24rpx 16rpx;
		margin-top:24rpx;
		.left{
			width: 436rpx;
			.title{
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.date{
				margin-top:24rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				line-height: 48rpx;
				display: flex;
				align-items: center;
				& text:first-child{
					padding-right:14rpx;
				}
				.yellow-bg{
					font-size: 20rpx;
					color: #FF9500;
					height: 32rpx;
					line-height: 32rpx;
					background: rgba(255,149,0,0.08);
					border-radius: 4rpx;
					padding:0 14rpx;
					margin-left:16rpx;
				}
				.blue-bg{
					font-size: 20rpx;
					color: #356FE5;
					height: 32rpx;
					line-height: 32rpx;
					background: rgba(53,111,229,0.04);
					border-radius: 4rpx;
					padding:0 14rpx;
					margin-left:16rpx;
				}
			}
		}
		.cover{
			width: 174rpx;
			height: 134rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
	}
	.row:first-child{
		margin-top:0;
	}
}
</style>
